<template>
  <div>
    <h1>我是父组件</h1>
    <hr>
    <child-com ref="mychild"></child-com>
    <hr>
    <child-two></child-two>
    <hr>
    <child-three></child-three>
  </div>
</template>

<script setup>
    import {ref,onMounted,defineAsyncComponent } from 'vue'
// defineAsyncComponent 异步加载组件的 增加性能，性能优化方案
// 
  import childCom from './childCom.vue'
  import childTwo from './childTwo.vue'

  // 异步组件
const childThree = defineAsyncComponent(() =>import('./childThree.vue'))
   //创建ref可以随时挂载到dom元素和组件
  // mychild.value就是直接获取到dom元素和子组件
  const mychild=ref(null);
  // ---子组件
  onMounted(()=>{
      console.log(mychild.value)
      // 在setup中无法直接获取子组件的数据和方法
      // 子组件defineExpose暴露后就可以访问了
     mychild.value.run() 
    console.log(mychild.value.myname)
  
  })




</script>
